<template>
	<view class="spread" :class="{'box-spread': showFlag}">
		<view class="spread-item flex flex-col items-center" v-for="item in PositionDictionary" :key="item.label"
			:style="item.style">
			<text class="spread-up">{{item.up}}</text>
			<template v-if="isAch == 1">
				<image :src="item.front" mode="widthFix" v-if="item.dir == 0"></image>
				<image :src="item.back" mode="widthFix" v-else></image>
			</template>
			<template v-else>
				<image src="@/static/tarot-bg.png" mode="widthFix"></image>
			</template>
			<text class="spread-label flex justify-center">{{item.label}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
	const PositionDictionary = ref([{
			up: "切",
			label: "现居",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(-50%, -50%)"
			}
		},
		{
			up: "风",
			label: "东",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(calc(-50% - 160rpx), -50%)"
			}
		},
		{
			up: "土",
			label: "西",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(calc(-50% + 160rpx), -50%)"
			}
		},
		{
			up: "火",
			label: "南",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(-50%, calc(-50% - 100% - 20rpx))"
			}
		},
		{
			up: "水",
			label: "北",
			style: {
				top: "50%",
				left: "50%",
				transform: "translate(-50%, calc(-50% + 100% + 20rpx))"
			}
		}
	])
	onMounted(() => {
		console.log(cardList.value, isAch.value)
		nextTick(() => {
			if (isAch.value == 1 && cardList.value?.length) {
				dataFormat()
			}
		})
	})
	const dataFormat = () => {
		PositionDictionary.value.map((item, idx) => {
			item.dir = cardList.value[idx].dir
			item.front = cardList.value[idx].tarot.front
			item.back = cardList.value[idx].tarot.back
		})
	}
</script>

<style>
	@import "./spread.css";

	.spread {
		height: 780rpx;
	}
</style>